
<template>
  <!-- 导入 -->
  <div style="margin-top:30px">
    <!-- form -->
    <avue-form
      :option="option"
      v-model="form"
      @submit="handleSubmit"
    >
      <template
        slot-scope="scope"
        slot="menuForm"
      >
        <el-button @click="handleCancel">取消</el-button>
      </template>
      <template
        slot-scope="{row}"
        slot="entryStartTime"
      >
        {{row.entryStartTime || '自动获取'}}
      </template>
      <template
        slot-scope="{row}"
        slot="entryEndTime"
      >
        {{row.entryEndTime || '自动获取'}}
      </template>
      <template
        slot-scope="{row}"
        slot="supShortAmount"
      >
        {{row.supShortAmount | rcaNumberFormat}}
      </template>
      <template
        slot-scope="{row}"
        slot="supUnloadAmount"
      >
        {{row.supUnloadAmount | rcaNumberFormat}}
      </template>
    </avue-form>

    <div style="display: flex;justify-content: center">
        <el-button v-if="readonly" @click="handleCancel">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { putObj, getUnloadShortAmount, listAllSubWayLine, listSubWayStation } from '@/api/rca/swckbankcashpaymentnote'
import { tableOption } from '@/const/crud/rca/swckbankcashpaymentnote'
import { rcaNumberFormat } from '@/const/crud/rca/common'

export default {
  name: "EditBankBill",
  components: {
    // TempData,
  },
  filters: {
    rcaNumberFormat(val){
      return rcaNumberFormat(val, true)
    }
  },
  data () {
    return {
      form: {},
      lineOptions: [],
      stationOptions: [],
    }
  },
  props: ["dialogImportVisible", "target", "readonly"],
  computed: {
    option(){
      return {
        emptyBtn: false,
        detail: this.readonly,
        column: [{
          label: '线路',
          prop: 'lineCode',
          type: 'select',
          dicData: this.lineOptions,
          props: {
            label: 'name',
            value: 'code'
          },
          rules: [
            {
              required: true,
              message: '请选择线路',
              trigger: 'blur'
            }
          ]
        },
        {
          label: '站点',
          prop: 'stationCode',
          type: 'select',
          dicData: this.stationOptions,
          props: {
            label: 'name',
            value: 'code'
          },
          rules: [
            {
              required: true,
              message: '请选择站点',
              trigger: 'blur'
            }
          ]
        }, {
          "type": "datetime",
          "label": "入账开始时间",
          "prop": "entryStartTime",
          format: 'yyyy-MM-dd',                  // 这是组件展示的日期格式
          valueFormat: 'yyyy-MM-dd',
          disabled: true,
          rules: [
            {
              required: true,
              message: '请选择入账开始时间',
              trigger: 'blur'
            }
          ]
        }, {
          "type": "datetime",
          "label": "入账结束时间",
          "prop": "entryEndTime",
          format: 'yyyy-MM-dd',                  // 这是组件展示的日期格式
          valueFormat: 'yyyy-MM-dd',
          disabled: true,
          rules: [
            {
              required: true,
              message: '请选择入账结束时间',
              trigger: 'blur'
            }
          ]
        },
        {
          "type": "date",
          "label": "交易日期",
          "prop": "tradeTime",
          format: 'yyyy-MM-dd',                  // 这是组件展示的日期格式
          valueFormat: 'yyyy-MM-dd',
          rules: [
            {
              required: true,
              message: '请选择交易日期',
              trigger: 'blur'
            }
          ]
        }, {
          width: 300,
          label: '现金缴款金额',
          prop: "amount",
          type: 'number',
          precision: 2
        }, {
          width: 300,
          label: '营收总金额',
          prop: "cashReceiptsAmount",
          type: 'number',
          precision: 2,
          disabled: true
        }, {
          width: 300,
          label: '补短款金额',
          prop: "supShortAmount",
          type: 'number',
          precision: 2,
          disabled: true,
        }, {
          width: 300,
          label: '补卸载金额',
          prop: "supUnloadAmount",
          type: 'input',
          disabled: true,
          display: false
        }
        ]
      }
    }
  },
  created () {
    const {
      id,
      lineCode,
      stationCode,
      entryStartTime,
      entryEndTime,
      tradeTime,
      amount,
      cashReceiptsAmount,
      supShortAmount,
      supUnloadAmount,
    } = this.target;
    this.form = {
      id,
      lineCode,
      stationCode,
      entryStartTime,
      entryEndTime,
      tradeTime,
      amount: amount/100,
      cashReceiptsAmount: cashReceiptsAmount/100,
      supShortAmount: supShortAmount/100,
      supUnloadAmount: supUnloadAmount/100,
    }
    this.loadLine()
    this.loadStation()

  },
  watch: {
    'form.lineCode': function () {
      this.updateInfo()
      this.loadStation()
    },
    'form.stationCode': function () {
      this.updateInfo()
    },
    'form.tradeTime': function () {
      this.updateInfo()
    },
    'form.amount': function () {
      this.updateInfo()
    },
  },
  methods: {
    async loadLine(){
      const {data} = await listAllSubWayLine({
        dataType: '2'
      })
      this.lineOptions = data.data || []
    },
    async loadStation(){
      const {data} = await listSubWayStation({
        lineCode: this.form.lineCode,
        dataType: '2'
      })
      this.stationOptions = data.data || []
    },
    async updateInfo () {
      const { lineCode, stationCode, tradeTime } = this.form;
      const dataType = "2";
      if (lineCode && stationCode && tradeTime) {
        const { data: { data: { supShortAmount, supUnloadAmount, entryStartTime, entryEndTime } } } = await getUnloadShortAmount({
          lineCode, stationCode, tradeTime, dataType
        })
        Object.assign(this.form, { supShortAmount: supShortAmount/100, supUnloadAmount: supUnloadAmount/100, entryStartTime, entryEndTime })
      }
    },
    async handleSubmit (form) {
      const params = {
        ...this.form,
        amount: this.form.amount * 100,
        supShortAmount:  this.form.supShortAmount * 100,
        supUnloadAmount:  this.form.supUnloadAmount * 100,
      }
      await putObj(params)
      this.$message.success("修改成功")
      this.handleClose()
    },
    handleClose () {
      this.$emit("close");
    },
    handleCancel () {
      this.handleClose();
    },
  },
};
</script>
<style lang="scss">
</style>
